<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>沃店</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">

    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #EFEFEF;
        }

        .userheader {
            background-color: #fff;
        }

        .touxiang {
            margin-top: -25px;
            width: 70px;
            height: 70px;
            border-radius: 100px;
            position: relative;
            z-index: 1011;
        }

        .userheader_button {
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .userheader p {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 2px;
        }

        .userheader span {
            font-size: 14px;
            color: #D7D7D7;

        }

        .evaluated {
            padding: 0 20px;
            margin-bottom: 20px;
        }

        .pay {

        }

        .tail {
            background-color: #fff;
            padding: 30px 0;
        }

        .userinfo {
            padding: 10px 0;
            margin-bottom: 2px;
        }
    </style>
</head>

<body id="order">
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHome/userorderlist" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">

        </a>
    </h1>
    <div class="am-header-right am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHome/index" class="">
            <i class="am-header-icon am-icon-home"></i>
        </a>
    </div>
</header>
<div class="am-g userheader" align="center">
    <img src="${user.avatar}" alt="" class="touxiang">
    <c:if test="${hallOrder.statu==10||hallOrder.statu==20||hallOrder.statu==40||hallOrder.statu==16||hallOrder.statu==26||hallOrder.statu==46||hallOrder.statu==11||hallOrder.statu==21||hallOrder.statu==41}">
        <p>订单未完成</p>
        <div class="pay">
            <span>感谢您对沃店的使用，期待下次的服务</span><br>
        </div>
    </c:if>
    <c:if test="${hallOrder.statu==13||hallOrder.statu==23||hallOrder.statu==30||hallOrder.statu==43}">
        <p>订单未支付</p>
        <div class="pay">
            <span>感谢您对沃店的使用，期待下次的服务</span><br>
            <a href="${pageContext.request.contextPath}/clientRenewal/pay?orderId=${hallOrder.id}">
                <img src="${pageContext.request.contextPath}/images/pay.png" class="userheader_button">
            </a>
        </div>
    </c:if>
    <c:if test="${hallOrder.statu==14||hallOrder.statu==24||hallOrder.statu==44}">
        <p>订单已完成</p>
        <div class="pay">
            <span>感谢您对沃店的使用，期待下次的服务</span><br>
            <a href="${pageContext.request.contextPath}/clientHome/goComment?id=${hallOrder.id}">
                <img src="${pageContext.request.contextPath}/images/comment.png" class="userheader_button">
            </a>
        </div>
    </c:if>
    <c:if test="${hallOrder.statu==15||hallOrder.statu==25||hallOrder.statu==45}">
        <p>订单已完成</p>
        <div class="evaluated">
            <span style="color: #000;font-size: 14px;font-weight: bold;">我的评价:</span>
            <c:forEach var="s" begin="1" end="${grade}">
                <img src="${pageContext.request.contextPath}/images/star_light.png">
            </c:forEach>
            <c:forEach var="s" begin="1" end="${5-grade}">
                <img src="${pageContext.request.contextPath}/images/star.png">
            </c:forEach>
            <br>
            <span class="evaluate_content">${content}</span>
        </div>
    </c:if>
</div>
<div class="am-g">
    <span class="am-u-sm-12" style="font-size: 18px;font-weight: bold;margin: 10px 0;">订单跟踪</span>
</div>
<div class="am-g tail">
    <c:if test="${hallOrder.statu==15||hallOrder.statu==25||hallOrder.statu==45}">
        <div class="am-u-sm-12">
            <div class="am-u-sm-1">
                <img src="${pageContext.request.contextPath}/images/line.png" style="margin-top: 10px;">
            </div>

            <div class="clearpadding am-u-sm-11">
                <span style="font-size: 14px;">订单完成</span><br>
                <span style="font-size: 12px;">感谢您的使用，欢迎下次光临</span>
            </div>
        </div>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/payed.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/paying.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/installing.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/accept.jsp"></jsp:include>
    </c:if>
    <c:if test="${hallOrder.statu==14||hallOrder.statu==24||hallOrder.statu==44}">

        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/payed.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/paying.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/installing.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/accept.jsp"></jsp:include>
    </c:if>
    <c:if test="${hallOrder.statu==13||hallOrder.statu==23||hallOrder.statu==43}">
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/paying.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/installing.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/accept.jsp"></jsp:include>
    </c:if>
    <c:if test="${hallOrder.statu==11||hallOrder.statu==21||hallOrder.statu==41||hallOrder.statu==33}">
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/installing.jsp"/>
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/accept.jsp"></jsp:include>
    </c:if>
    <c:if test="${hallOrder.statu==16||hallOrder.statu==26||hallOrder.statu==46||hallOrder.statu==34}">
        <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/accept.jsp"></jsp:include>
    </c:if>

    <jsp:include page="/WEB-INF/jsp/client/hallorderstatus/order.jsp"></jsp:include>
</div>
<div class="am-g">
    <span class="am-u-sm-12" style="font-size: 18px;font-weight: bold;margin: 10px 0;">订单详情</span>
</div>
<div class="am-g whiteBg userinfo">
    <div class="am-u-sm-4" style="padding-right: 0;">下单时间：</div>
    <div class="am-u-sm-8" style="padding-left: 0;">${createTime}</div>
</div>
<div class="am-g whiteBg userinfo">
    <div class="am-u-sm-4" style="padding-right: 0;">订单信息：</div>
    <div class="am-u-sm-8" style="padding-left: 0;">
        <span>${hallOrder.realName}</span><br>
        <c:if test="${hallOrder.orderType!=2}">
            <span>${hallOrder.contractPhone}</span><br>
            <span>${hallOrder.address}</span><br>
        </c:if>
        <c:if test="${hallOrder.orderType==1||hallOrder.orderType==2}">
            <span>${hallOrder.broadbandAccount}</span><br>
        </c:if>
        <span>${organization.organizationName}</span>

        <c:if test="${hallOrder.orderType!=2}">
            <c:if test="${hallOrder.totalPrice!=null&&hallOrder.totalPrice!=0}">
                <br>
                <span>
                   ￥ ${hallOrder.totalPrice}</span>
            </c:if>
            <c:if test="${hallOrder.transactionId!=null||hallOrder.payType=='线下支付'}">
                <br>
                <span>已支付</span>
            </c:if>
        </c:if>
    </div>
</div>

<c:if test="${hallOrder.orderType==2}">
    <div class="am-g whiteBg userinfo">

        <div class="am-u-sm-4" style="padding-right: 0;">续费信息：</div>
        <div class="am-u-sm-8" style="padding-left: 0;">
            <span>${broadbandPackage.packageName}</span><br>
            <span>${broadbandPackage.description}</span>
            <c:if test="${hallOrder.totalPrice!=null&&hallOrder.totalPrice!=0}">
                <br>
                <span>
                   ￥ ${hallOrder.totalPrice}</span>
            </c:if>
            <c:if test="${hallOrder.transactionId!=null||hallOrder.payType=='线下支付'}">
                <br>
                <span>已支付</span>
            </c:if>
        </div>
    </div>

</c:if>

<c:if test="${hallOrder.orderType==0}">
    <div class="am-g whiteBg userinfo">

        <div class="am-u-sm-4" style="padding-right: 0;">产品信息：</div>
        <div class="am-u-sm-8" style="padding-left: 0;">
            <span>${broadbandPackage.packageName}</span><br>
            <span>${broadbandPackage.description}</span><br>
            <span>
            <c:forEach var="device" items="${devices}">
                ${device.deviceName}、
            </c:forEach>

            </span><br>
        </div>
    </div>
</c:if>
<c:if test="${hallOrder.orderType==3}">
    <div class="am-g whiteBg userinfo">
        <div class="am-u-sm-4" style="padding-right: 0;">靓号信息：</div>
        <div class="am-u-sm-8" style="padding-left: 0;">
            <span>${phone.phoneNumber}</span><br>
        </div>
    </div>
</c:if>

<c:if test="${hallOrder.orderType!=2}">
    <div class="am-g whiteBg userinfo">
        <div class="am-u-sm-4" style="padding-right: 0;">备注信息：</div>
        <div class="am-u-sm-8" style="padding-left: 0;">

            <span>${hallOrder.description}</span><br>
        </div>
    </div>
</c:if>
<c:if test="${handleRecord!=null}">
    <div class="am-g whiteBg userinfo">
        <div class="am-u-sm-4" style="padding-right: 0;">处理结果：</div>
        <div class="am-u-sm-8" style="padding-left: 0;">
            <span>${handleRecord.description}</span><br>
        </div>
    </div>
</c:if>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script type="text/javascript">

</script>
</body>

</html>
